<template>
	<div class="page-container">
		<el-card class="page-card">
			<el-form ref="queryForm" :inline="true" :model="queryParams" label-position="left">
				<el-form-item label="部门名称：" prop="deptName">
					<el-input v-model="queryParams.deptName" clearable placeholder="请输入部门名称" />
				</el-form-item>
				<el-form-item label="状态：" prop="status">
					<el-select v-model="queryParams.status" clearable placeholder="部门状态">
						<el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<div class="page-search-btn">
						<el-button type="primary" @click="handleQuery">搜索 </el-button>
						<el-button @click="resetQuery">重置</el-button>
					</div>
				</el-form-item>
			</el-form>

			<div class="page-card-options">
				<el-button v-hasPermi="['system:dept:add']" type="primary" @click="handleAdd">新增 </el-button>
			</div>

			<el-table v-loading="loading" :data="deptList" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" default-expand-all row-key="deptId" stripe>
				<el-table-column :formatter="emptyToString" label="部门名称" prop="deptName" min-width="260"></el-table-column>
				<el-table-column :formatter="emptyToString" label="排序" prop="orderNum" min-width="200"></el-table-column>
				<el-table-column :formatter="statusFormat" label="状态" prop="status" min-width="100"></el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="创建时间" prop="createTime" min-width="156">
					<template slot-scope="scope">
						<span>{{ parseTime(scope.row.createTime) }}</span>
					</template>
				</el-table-column>
				<el-table-column width="120" align="center" fixed="right" header-align="center" label="操作">
					<template slot-scope="scope">
						<el-dropdown @command="handleCommand($event, scope.row)">
							<el-button type="primary"> 更多<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item v-hasPermi="['system:dept:edit']" command="handleUpdate">编辑</el-dropdown-item>
								<el-dropdown-item v-hasPermi="['system:dept:add']" command="handleAdd">row</el-dropdown-item>
								<el-dropdown-item v-hasPermi="['system:dept:remove']" :disabled="scope.row.parentId !== 0" command="handleDelete">删除</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 添加或编辑部门对话框 -->
		<l-dialog v-model="open" :title="title" ok-button-text="保存" width="444px" @close="cancel" @formClose="cancel" @formSubmit="submitForm">
			<el-form ref="form" :model="form" :rules="rules" label-width="100px">
				<el-row>
					<el-col v-if="form.parentId !== 0" :span="24">
						<el-form-item v-if="showOptions" label="上级部门：" prop="parentId">
							<treeselect v-model="form.parentId" :normalizer="normalizer" :options="deptOptions" class="!w-[299px] !max-w-[299px]" placeholder="选择上级部门" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="部门名称：" prop="deptName">
							<el-input v-model="form.deptName" placeholder="请输入部门名称" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="显示排序：" prop="orderNum">
							<el-input-number v-model="form.orderNum" :min="0" controls-position="right" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="负责人：" prop="leader">
							<el-input v-model="form.leader" maxlength="20" placeholder="请输入负责人" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="联系电话：" prop="phone">
							<el-input v-model="form.phone" maxlength="11" placeholder="请输入联系电话" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<!--            <el-form-item label="邮箱：" prop="email">-->
						<!--              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />-->
						<!--            </el-form-item>-->
					</el-col>
					<el-col :span="24">
						<el-form-item label="部门状态：">
							<el-radio-group v-model="form.status">
								<el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }} </el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</l-dialog>
	</div>
</template>

<script>
import { addDept, delDept, getDept, listDept, listDeptExcludeChild, updateDept } from '@/api/system/dept';
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import tableMixins from '@/mixins/table';

export default {
	name: 'Dept',
	components: { Treeselect },
	mixins: [tableMixins],
	data() {
		return {
			// 遮罩层
			loading: true,
			// 显示搜索条件
			showSearch: true,
			// 表格树数据
			deptList: [],
			// 部门树选项
			deptOptions: [],
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			open: false,
			// 是否显示上级部门下拉
			showOptions: true,
			// 状态数据字典
			statusOptions: [],
			// 查询参数
			queryParams: {
				deptName: undefined,
				status: undefined,
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }],
				deptName: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
				orderNum: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }],
				email: [
					{
						type: 'email',
						message: "'请输入正确的邮箱地址",
						trigger: ['blur', 'change'],
					},
				],
				phone: [
					{
						pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
						message: '请输入正确的手机号码',
						trigger: 'blur',
					},
				],
			},
		};
	},
	created() {
		this.getList();
		this.getDicts('sys_normal_disable').then((response) => {
			this.statusOptions = response.data;
		});
	},
	methods: {
		/** 查询部门列表 */
		getList() {
			this.loading = true;
			this.queryParams.tenantId = this.$store.getters.tenantId;
			listDept(this.queryParams)
				.then((response) => {
					this.deptList = this.handleTree(response.data, 'deptId');
					this.setActionWidth();
				})
				.finally(() => {
					this.loading = false;
				});
		},
		/** 转换部门数据结构 */
		normalizer(node) {
			if (node.children && !node.children.length) {
				delete node.children;
			}
			return {
				id: node.deptId,
				label: node.deptName,
				children: node.children,
			};
		},
		// 字典状态字典翻译
		statusFormat(row, column) {
			return this.selectDictLabel(this.statusOptions, row.status);
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				deptId: undefined,
				parentId: undefined,
				deptName: undefined,
				orderNum: undefined,
				leader: undefined,
				phone: undefined,
				email: undefined,
				status: '0',
			};
			this.resetForm('form');
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm('queryForm');
			this.handleQuery();
		},
		/** 新增按钮操作 */
		handleAdd(row) {
			this.reset();
			if (row != undefined) {
				this.form.parentId = row.deptId;
			}
			this.open = true;
			this.title = '添加部门';
			listDept({ tenantId: this.$store.getters.tenantId }).then((response) => {
				if (response.data.length < 1) {
					this.showOptions = false;
				}
				this.deptOptions = this.handleTree(response.data, 'deptId');
			});
		},
		/** 编辑按钮操作 */
		handleUpdate(row) {
			this.reset();
			getDept(row.deptId).then((response) => {
				this.form = response.data;
				this.open = true;
				this.title = '编辑部门';
			});
			let obj = {
				deptId: row.deptId,
				tenantId: this.$store.getters.tenantId,
			};
			listDeptExcludeChild(obj).then((response) => {
				this.deptOptions = this.handleTree(response.data, 'deptId');
			});
		},
		/** 提交按钮 */
		submitForm: function () {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					this.form.tenantId = this.$store.getters.tenantId;
					if (this.form.deptId != undefined) {
						updateDept(this.form).then((response) => {
							this.msgSuccess('编辑成功');
							this.open = false;
							this.getList();
						});
					} else {
						addDept(this.form).then((response) => {
							this.msgSuccess('新增成功');
							this.open = false;
							this.getList();
						});
					}
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			this.$confirm('是否确认删除名称为"' + row.deptName + '"的数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return delDept(row.deptId);
				})
				.then(() => {
					this.getList();
					this.msgSuccess('删除成功');
				});
		},
		handleCommand(key, row) {
			this[key](row);
		},
	},
};
</script>
